<template>
  <div class="bodys">
    <div class="top">
      <van-sticky :offset-top="0">
        <div class="tobus">
          <search></search>
        </div>
      </van-sticky>

      <div class="tabs">
        <van-tabs
          v-model="active"
          @change="weangs"
          sticky
       
          animated
           v-if="show" 
        >
          <van-tab title="全部订单">
            <div class="mongto" >
              <orderformdata :shujut="0"></orderformdata>
            </div>
             <div style="height: 10px;  background-color: rgb(238, 238, 238);" ></div>
          </van-tab>
          <van-tab title="待付款">
            <div class="mongto"  >
              <orderformdata :shujut="1"></orderformdata>
            </div>
             <div style="height: 10px;  background-color: rgb(238, 238, 238);" ></div>
          </van-tab>
          <van-tab title="待发货">
            <div class="mongto"  >
              <orderformdata :shujut="2"></orderformdata>
            </div>
              <div style="height: 10px;  background-color:  rgb(238, 238, 238);" ></div>
          </van-tab>
          <van-tab title="待收货" >
            <div class="mongto">
              <orderformdata :shujut="3"></orderformdata>
            </div>
            <div style="height: 10px;  background-color:  rgb(238, 238, 238);" ></div>
          </van-tab>
          <van-tab title="待评价">
            <div class="mongto"  >
              <orderformdata :shujut="4"></orderformdata>
            </div>
            <div style="height: 10px;  background-color:  rgb(238, 238, 238);" ></div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import { Sticky } from "vant";
import tabs from "@/components/Tabs.vue";
import { Tab, Tabs } from "vant";
import { List } from "vant";
import orderformdata from "../components/orderform/zhujian.vue";
// import tabs from "@/components/Tabs.vue";
import search from "@/components/Search.vue";
export default {
  components: {
    orderformdata,
    tabs,
    search,
    [Tab.name]: Tab,
    [List.name]: List,
    [Tabs.name]: Tabs,
    [Sticky.name]: Sticky,
  },
  data() {
    return {
      active: 0,
      mansda: [],
      TabTitle: [],
      show:true,
    };
  },
  created() {
    // this.simulation();
    console.log();
  },
  activated() {
    // 通过页面下标来拿
    this.active = parseInt(this.$route.query.index);
    setTimeout(() => {
        this.updateZhuJian()
    }, 500);
  
  },
  watch: {
    $route(to, from) {
      //如果 要 to(进入) 的页面是需要 keepAlive 缓存的，把 name push 进 include数组
      // console.log(to);
      if (to.fullPath == "/orderform") {
        // console.log("789456123");
        this.guanb();
      }
      if (from.fullPath == "/orderform") {
        window.removeEventListener("scroll", this.handleScroll);
        // console.log("1234568");
      }
    },
  },
  mounted() {},
  methods: {
    handleScroll() {
      let scrollTop = window.pageYOffset;
      this.$route.meta.Yaxis = scrollTop;
    },
    guanb() {
      window.addEventListener("scroll", this.handleScroll);
    },

// 更新组件
 updateZhuJian() {
      this.show = false;
      this.$nextTick(() => {
        this.show = true;
        this.$forceUpdate();
      });
    },



    http() {
      //   console.log( this.$route.query.index)

      this.$get(API.GET_ORDER_LIST, {
        token: localStorage.getItem("token"),
        showType: this.active,
        // page:1,
      }).then((res) => {
        // this.suliang.push(res.data.list.length);
        this.mansda = res.data.list;
      });

      //  console.log(this.active);
    },
    weangs(e) {},
  },
};
</script>

<style lang="less" scoped>
.bodys {
  height: 100vh;
  overflow: hidden;
  background-color: @background;
  
  .top {
    // position: fixed;
    // top: 0;
    // left: 0;
    // width: 100%;
    // z-index: 50;
    // height: 85px;
    // background-color: rgb(255, 255, 255);
    // border-bottom: 3px solid rgb(255, 194, 194);
    .tobus {
      width: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 100;
    }
    .van-sticky {
      width: 100%;
    }
    .mongto {
      // margin-top: 50px;
      height: 100vh;
   
      overflow-x: auto;
    }
    .tabs{
      width: 100%;
      position: fixed;
      top: 50px;
      left: 0;
      z-index: 100;
      .van-sticky{
        width: 100%;
      }
    }
  }
  // .router {
  // }
}
</style>